<template>
    <div class="video-list-box" v-loading="loading">
        <el-input
            v-model.trim="keyword"
            placeholder="请输入查询关键字"
            clearable
            @keyup.enter.native="findVideo"
            style="width: 180px;margin-left:5px;">
        </el-input>
        <el-select v-model="type" placeholder="请选择渠道" style="width:120px;margin-left:20px;">
            <el-option
            v-for="item in searchFrom"
            :key="item.value"
            :label="item.name"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="sortType" placeholder="请选择排序方式" style="width:120px;margin-left:20px;">
            <el-option
            v-for="item in searchMethod"
            :key="item.value"
            :label="item.name"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" @click="findVideo" style="margin-left:20px;">查询</el-button>
        <div class="video-box" v-if="videoList.length">
            <div class="video-items" v-for="(item, index) in videoList" :key="index">
                <videoBox :url="item.mp4Url" :img="item.cover" :time="item.duration"/>
                <div class="video-title">
                    <span class="title-official" v-if="item.type === 0">官方</span>
                    <span class="title-user" v-else>用户</span>
                    <span>{{item.title}}</span>
                </div>
                <div class="video-btn">
                    <el-button type="success" size="mini" @click="check(item)">选中</el-button>
                </div>
            </div>
        </div>

        <div class="no-video-list" v-else>没找着视频呢，快点上传吧~</div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            keyword: '',
            videoList: [],
            type: 10,
            searchFrom: [
                { name: '全部', value: 10 },
                { name: '官方视频', value: 0 },
                { name: '用户上传', value: 1 }
            ],
            sortType: 10,
            searchMethod: [
                { name: '全部', value: 10 },
                { name: '最新发布', value: 0 },
                { name: '点赞最多', value: 1 },
                { name: '打赏最多', value: 2 },
                { name: '点评最多', value: 3 }
            ],
            pageNum: 1,
            pageSize: 10,
            total: 0
            // currentList: []
        }
    },
    props: {
        gameName: {}
    },
    created () {
        this.keyword = this.gameName
        this.findVideo()
    },
    watch: {
    },
    methods: {
        // 获取视频列表
        async findVideo () {
            if (this.loading) return
            this.loading = true
            let params = {
                pageIndex: this.pageNum,
                pageNum: this.pageSize
            }
            if (this.type !== 10) {
                params.type = this.type
            }
            if (this.sortType !== 10) {
                params.sortType = this.sortType
            }
            if (this.keyword) {
                params.keyword = this.keyword
            }
            let res = await this.$http.post('/game/findGameVideos', params)
            if (res.code === '0') {
                this.videoList = res.data || []
                this.total = res.count || 0
            }
            this.loading = false
        },

        // 选中
        check (item) {
            this.$emit('check', item)
        },

        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.findVideo()
        },
        pageChange (val) {
            this.pageNum = val
            this.findVideo()
        }
    }
}
</script>

<style lang="scss" scoped>
    .video-list-box {
        .video-box {
            min-height: 324px;
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            .video-items {
                padding: 5px;
                padding-top: 10px;
                max-height: 162px;
                &:hover {
                    background-color: #eeeeee;
                }
                .video-title {
                    margin-top: 4px;
                    font-size: 12px;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    width: 160px;
                    height: 35px;
                    word-break: break-all;
                    .title-official {
                        color: #F56C6C;
                        margin-right: 5px;
                    }

                    .title-user {
                        color: #67C23A;
                        margin-right: 5px;
                    }
                }
                .video-btn {
                    display: flex;
                    // align-items: center;
                    justify-content: center;
                }
            }
        }
        .no-video-list {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
